// Standard colors to reuse instead of renaming variables.
$opaque-black-1: rgba(0, 0, 0, .12);
$opaque-black-2: rgba(0, 0, 0, .10);
$opaque-black-3: rgba(0, 0, 0, .05);
$opaque-black-4: rgba(0, 0, 0, .15);
$opaque-black-5: rgba(0, 0, 0, .1);
$opaque-black-6: rgba(0, 0, 0, .4);
$opaque-black-7: rgba(0, 0, 0, .2);
$opaque-black-8: rgba(0, 0, 0, .6);
$opaque-black-9: rgba(0, 0, 0, .06);

$opaque-white-1: rgba(255, 255, 255, .25);

$opaque-grey: rgba(60, 60, 60, .26);

$light-grey-1: #f9f9f9;
$light-grey-2: #f2f4fa;
$light-grey-3: #e0e0e0;
$light-grey-4: #e8e8e8;
$light-grey-5: #f0f0f0;
$light-grey-6: #dadada;
$light-grey-7: #c7c7c7;
$light-grey-8: #e2e2e2;
$light-grey-9: #f1f1f1;
$light-grey-10: #b1b1b1;
$light-grey-11: #c5c5c5;
$light-grey-12: #ccc;
$light-grey-13: #eee;

$light-blue-1: #5a78f0;
$light-blue-2: #96a8b6;
$light-blue-3: #476081;
$light-blue-4: #25b0e8;
$light-blue-5: #00b3db;

$light-purple-1: #7070e3;

$light-violet-1: #5c74eb;

$light-orange: #f37240;

$light-green-1: #f2fafa;
$light-green-2: #6f0;
$light-green-3: #37ce76;
$light-green-4: #f1fafa;

$mew-green: #05c0a5;

$white: #fff;
$black: #000;

$dark-yellow: #dadd98;

$red-1: #f00;
$red-2: #ff2f49;

$grey-1: #adadad;
$grey-2: #999;

$dark-grey-1: #434f61;
$dark-grey-2: #536d8b;
$dark-grey-3: #4c4c4c;
$dark-grey-4: #6b87a3;
$dark-grey-5: #444;
$dark-grey-6: #afafaf;
$dark-grey-7: #989898;
$dark-grey-8: #888;
$dark-grey-9: #555;
$dark-grey-10: #8a8a8a;

$dark-blue-1: #506175;
$dark-blue-2: #0b2840;
$dark-blue-3: #132b3f;
$dark-blue-4: #677890;
$dark-blue-5: #434f60;
$dark-blue-6: #003945;
$dark-blue-7: #0c5876;

$dark-green-1: #008000;
$dark-green-2: #00927d;

// *********************************************************************
// Standard window width sizes
// *********************************************************************
$tablet-width: 900px;
$mobile-width: 600px;

// *********************************************************************
// Box Shadow color styles
// *********************************************************************
$box-shadow-color-1: $opaque-black-1;
$box-shadow-color-2: $opaque-black-2;
$news-block-box-shadow-color: $opaque-black-3;
$topbanner-block-box-shadow-color: $opaque-black-4;
$tiny-header-shadow-color: $opaque-black-5;
$language-flag-box-shadow: $opaque-black-6;
$language-menu-box-shadow: $opaque-black-1;

$notification-dot-background-color: $red-1;

// *********************************************************************
// Elements background color styles
// *********************************************************************
// This background color used for most of the elements background
$background-color-1: $light-grey-1; // Lite grey background color
$background-color-2: $mew-green; // Green background color
$background-color-3: $light-grey-2; // Team page background
$background-color-4: $light-grey-5;
$background-color-5: $opaque-white-1;
$background-color-6: $light-green-1;
$background-color-7: $light-green-4;
$background-color-white: $white;
$background-color-black: $black;
$nav-tab-background-color: $white;
$nav-tab--progress-bar-background-color: $background-color-2;
$about-mew-spaceman-background-color: $dark-blue-2;
$create-wallet-background-color: $light-blue-1;
$unlock-wallet-background-color: $background-color-2;
$footer-background-color: $dark-blue-3;
$price-bar-background-color: $light-blue-3;
$bootstrap-modal-header-background-color: $dark-grey-1;

$transaction-block-address: $light-purple-1;
$transaction-block-balance: $light-blue-1;
$transaction-block-network: $light-blue-4;
$transaction-block-token-search: $dark-grey-2;

$button-background-color-1: $dark-grey-4;
$small-tooltip-shadow: $opaque-black-5;

// *********************************************************************
// Social button styles
// *********************************************************************
$social-button-color-1: $grey-1; // News block social buttons

// *********************************************************************
// Border styles
// *********************************************************************
$border-color-1: $light-grey-3;
$border-color-2: $white;
$border-color-3: $black;
$border-color-4: $light-grey-1;
$border-color-5: $light-grey-4;
$border-color-6: $light-grey-2;
$price-bar-border-color: $dark-blue-4;
$border-bottom--mnemonic-phrase-key-color: $border-color-1;
$border-bottom--mnemonic-phrase-key-color-verification: $dark-blue-5;
$border-green: $mew-green;

// *********************************************************************
// z-index values
// *********************************************************************
$z-base: 0;
$z-base-top: 5;
$z-banner-animation: 10;
$z-menu: 100;
$z-tooltip: 500;
$z-bootstrap-modal-backdrop: 600;
$z-bootstrap-modal: 601;

// *********************************************************************
// Text styles
// *********************************************************************
$text-base-color: $dark-blue-1;
$text-white: $white;
$text-black: $black;
$text-color-1: $white; // White text color
$text-color-2: $mew-green; // Green text color
$text-color-3: $grey-2;
$text-color-4: $dark-grey-2;
$text-color-5: $red-2; // create-wallet footer text color
$text-color-6: $dark-blue-6;
$text-color-7: $dark-grey-5;
$text-color-8: $dark-blue-7;
$text-color-9: $light-grey-6;
$text-color-red: $red-1;
$text-color-news-content: $text-color-3;
$text--tooltip-color: $dark-grey-3;
$text--link-color: $text-color-2;
$text--mnemonic-phrase-key-color: $text-color-6;
$text--mnemonic-phrase-index-color: $text-color-3;
$text--footer-link-color: $light-blue-2;
$text-color-green: $text-color-2;
$text-side-menu-inactive-color: $light-grey-7;
$text-good-button-not-good: $light-grey-8;

$link-text-color-1: $dark-blue-1;
$link-text-color-2: $mew-green;
$link-text-color-3: $dark-grey-6;

// *********************************************************************
// Button styles
// *********************************************************************
$button--text-color-1: $white;
$button--border-color-1: $white;
$button--border-color-2: $mew-green;
$button--background-color-1: $mew-green;
$button--background-color-1-dark: $dark-green-2;
$button--background-color-2: $white;
$button--background-color-3: $dark-grey-7;


// *********************************************************************
// Custom scroll bar style
// *********************************************************************
$scrollbar--track-color: $light-grey-9;
$scrollbar--handle-color: $dark-grey-8;
$scrollbar--handle-hover-color: $dark-grey-9;


// *********************************************************************
// [Bootstrap] Dropdown language menu style
// *********************************************************************
$dropdown-menu-border-color: $light-grey-10;
$dropdown-menu--active--background-color: $light-grey-4;


// *********************************************************************
// [Bootstrap] Tooltip style
// *********************************************************************
$tooltip-font-color: $dark-grey-3;
$tooltip-box-shadow-color: $opaque-black-7;
$tooltip-box-shadow-color2: $opaque-black-8;
$tooltip-border-color: $light-grey-11;
$tooltip-background-color: $white;
$tooltip--button-background-color: $light-blue-2;
$tooltip--button-font-color: $white;


// *********************************************************************
// [Bootstrap] Nav tab style
// @ Create Wallet pages
// *********************************************************************
$nav-tab-background-color: $white;
$nav-tab--button-background-color: $light-grey-3;
$nav-tab--button--active--background-color: $dark-grey-1;
$nav-tab--button--active--font-color: $white;
$nav-tab--progress-bar-background-color: $mew-green;


// *********************************************************************
// CSS Toggle Button(Switch) style
// *********************************************************************
$css-toggle-button--slider-background-color: $light-grey-2;
$css-toggle-button--button-background-color: $mew-green;

$css-toggle-button--slider--active--background-color: $background-color-2;

$disabled: $light-grey-3;

$very-weak: $red-1;
$weak: $dark-yellow;
$strong: $light-green-2;
$very-strong: $dark-green-1;
